<meta name="csrf-token" content="{{ csrf_token() }}">
<div id="page-wrapper">
    <script src="{{URL::asset('js/echarts.common.min.js')}}"></script>
    <script src="{{URL::asset('js/jspdf.min.js')}}"></script>
    <script type="text/javascript">
        var urlArr = [];
        $('#btn_submit').on('click',function(){
            $('#myContainer').empty();
            var html = '<div id="Mychart" style="width:auto;height:800px"></div>';
            $('#myContainer').append(html);
            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});

            var request = {};
            request.squad = $('#squad').val();
            request.test = $('#teacher').attr('test_id');
            request.student = $('#student').val();
            $.post('my_test_submit',request,function(e){
                var builderJson = e.data.avg;
                var personJson = e.data.part.single;
                var squadJson =e.data.part.all;
                var string = e.data.string;
                var memo = $('#memo').val();


                var dom1 = document.getElementById('Mychart');
                var myChart1 = echarts.init(dom1,'light');

                string += '\n';
                string += memo;
                memo = string.split('\n');
                option = {
                    tooltip: {},
                    title: [{
                        text: '成绩情况统计',
                        textStyle:{
                            fontSize:20
                        },
                        x: '25%',
                        textAlign: 'center'
                    }, {
                        text: '当前班级成绩分布',
                        subtext: '总计 ' + Object.keys(personJson).reduce(function (all, key) {
                            return all + personJson[key];
                        }, 0),
                        subtextStyle:{
                            fontSize:18
                        },
                        textStyle:{
                            fontSize:20
                        },
                        x: '75%',
                        textAlign: 'center'
                    }, {
                        text: '所有班级成绩分布',
                        subtext: '总计 ' + Object.keys(squadJson).reduce(function (all, key) {
                            return all + squadJson[key];
                        }, 0),
                        subtextStyle:{
                            fontSize:18
                        },
                        textStyle:{
                            fontSize:20
                        },
                        x: '75%',
                        y: '50%',
                        textAlign: 'center'
                    }],
                    grid: [{
                        top: 50,
                        width: '50%',
                        bottom: '55%',
                        left: 10,
                        containLabel: true
                    },{
                        top: '30%',
                        width: '50%',
                        bottom: 0,
                        left: 10,
                        containLabel: true
                    }],
                    xAxis: [{
                        type: 'category',
                        data: Object.keys(builderJson),
                        axisLabel: {
                            interval: 0,
                            rotate: 30,
                            textStyle : {
                                fontFamily : '微软雅黑',
                                fontSize : 18
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },{
                        gridIndex:1,
                        axisLabel: {show: false},
                        axisLine: {show: false},
                        splitLine: {show: false},
                        axisTick: {show: false},
                        x:'25%',
                        y:'75%',
                        min: -1,
                        max: 1
                    }],
                    yAxis: [{
                        type: 'value',
                        max: 100,
                        splitLine: {
                            show: false
                        },
                        axisLabel:{
                            textStyle : {
                                fontFamily : '微软雅黑',
                                fontSize : 18
                            }
                        }
                    },{
                        gridIndex:1,
                        axisLabel: {show: false},
                        axisLine: {show: false},
                        splitLine: {show: false},
                        axisTick: {show: false},
                        min: -1,
                        max: 1
                    }],
                    series: [{
                        type: 'bar',
                        stack: 'chart',
                        z: 3,
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                        data: Object.keys(builderJson).map(function (key) {
                            return builderJson[key];
                        })
                    }, {
                        type: 'bar',
                        stack: 'chart',
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#eee',
                                fontSize: 10
                            }
                        },
                        data: Object.keys(builderJson).map(function (key) {
                            return 100 - builderJson[key];
                        })
                    },{
                        type: 'scatter',
                        xAxisIndex:1,
                        yAxisIndex:1,
                        data: [[0,0]],
                        symbolSize: 1,
                        label: {
                            normal: {
                                show: true,
                                formatter: memo.join('\n'),
                                padding: 10,
                                color: '#000',
                                fontSize: 20,
                                lineHeight: 30,
                                rich: {
                                    red: {
                                        color: 'red',
                                        fontSize:20
                                    },
                                    blue: {
                                        color: 'blue',
                                        fontSize:20
                                    },
                                    green: {
                                        color: 'green',
                                        fontSize:20
                                    }
                                }
                            }
                        }
                    },{
                        type: 'pie',
                        show: true,
                        position: 'inside',
                        formatter: '{d}%',
                        radius: [0, '30%'],
                        startAngle:45,
                        label: {
                            normal: {
                                show: true,
                                position: 'out',
                                formatter: '{b}:{c}人\r\n{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                                textStyle : {
                                    align : 'center',
                                    baseline : 'middle',
                                    fontFamily : '微软雅黑',
                                    fontSize : 18,
                                    fontWeight : 'bolder'
                                }
                            },
                        },
                        center: ['75%', '25%'],
                        data: Object.keys(personJson).map(function (key) {
                            return {
                                name: key.replace('.js', ''),
                                value: personJson[key]
                            }
                        })
                    }, {
                        type: 'pie',
                        radius: [0, '30%'],
                        startAngle:45,
                        label: {
                            normal: {
                                show: true,
                                position: 'out',
                                formatter: '{b}:{c}人\r\n{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                                textStyle : {
                                    align : 'center',
                                    baseline : 'middle',
                                    fontFamily : '微软雅黑',
                                    fontSize : 18,
                                    fontWeight : 'bolder'
                                }
                            },
                        },
                        center: ['75%', '75%'],
                        data: Object.keys(squadJson).map(function (key) {
                            return {
                                name: key.replace('.js', ''),
                                value: squadJson[key]
                            }
                        })
                    }]
                };

                myChart1.setOption(option);
            });
        });


        $('#btn_pdf').on("click",null,function(){
            urlArr = [];
            var leng = $('#Mychart').children().length;

            if(leng == 0){
                alert('未找到图表!');
                return;
            }

            var chart = echarts.getInstanceByDom(document.getElementById('Mychart'));

            var url = '';
            url = chart.getDataURL({
                pixelRatio: 3
            });

            dealImage(url,800,put_arr);

            setTimeout(function(){
                var doc = new jsPDF('p','pt','a4');
                doc.addImage(urlArr[0],'JPEG',5,25,620,400);

                var teacher = $('#teacher').val();
                var squad = $('#squad').find("option:selected").text();
                var student = $('#student').find("option:selected").text();

                var name = teacher+'-'+squad+'-'+student;
                doc.save(name+'.pdf');
            },1000);
        });

        function dealImage(base64, w,callback) {
            var newImage = new Image();
            var quality = 0.8;    //压缩系数0-1之间
            newImage.src = base64;
            newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
            var imgWidth, imgHeight;
            newImage.onload = function () {
                imgWidth = this.width;
                imgHeight = this.height;
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                if (Math.max(imgWidth, imgHeight) > w) {
                    if (imgWidth > imgHeight) {
                        canvas.width = w * 3;
                        canvas.height = w * imgHeight / imgWidth *3;
                    } else {
                        canvas.height = w*3;
                        canvas.width = w * imgWidth / imgHeight *3;
                    }
                } else {
                    canvas.width = imgWidth*3;
                    canvas.height = imgHeight*3;
                    quality = 0.8;
                }
                ctx.fillStyle = '#fff';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                var base64_new = canvas.toDataURL("image/jpeg", quality); //压缩语句
                // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
                // while (base64.length / 1024 > 150) {
                // 	quality -= 0.01;
                // 	base64 = canvas.toDataURL("image/jpeg", quality);
                // }
                // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
                // while (base64.length / 1024 < 50) {
                // 	quality += 0.001;
                // 	base64 = canvas.toDataURL("image/jpeg", quality);
                // }
                callback(base64_new);
            }
        }

        function put_arr(base64){
            urlArr.push(base64);
        }
    </script>
</div>

<div class="box box-body" id="myContainer">
    <div id="Mychart" style="width:auto;height:800px"></div>
</div>


<script type="text/javascript">
</script>



